<template>
  <div>

    <div class="container">
      <div class="item">
        <div style="border-radius: 20px">
          <br>
          <el-timeline>
            <el-timeline-item :timestamp="table.createTime" placement="top" v-for="table in tableData1" :key="table.id">
              <div style="border-radius: 10px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);width: 600px;padding: 10px">
                <div @click="viewContent(table.noticeId)">{{table.noticeTitle}}</div>
              </div>
            </el-timeline-item>
          </el-timeline>
          <el-pagination
            @size-change="handleSizeChange1"
            @current-change="handleCurrentChange1"
            background
            :page-size="pageSize1"
            layout="prev, pager, next"
            :total="totalCount1">
          </el-pagination>
        </div>
      </div>

      <div class="item">
        <div style="border-radius: 20px">
          <br>
          <el-timeline>
            <el-timeline-item :timestamp="table.createTime" placement="top" v-for="table in tableData2" :key="table.id">
              <div style="border-radius: 10px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);width: 600px;padding: 10px">
                <div @click="viewContent(table.noticeId)">{{table.noticeTitle}}</div>
              </div>
            </el-timeline-item>
          </el-timeline>
          <el-pagination
            @size-change="handleSizeChange2"
            @current-change="handleCurrentChange2"
            background
            :page-size="pageSize2"
            layout="prev, pager, next"
            :total="totalCount2">
          </el-pagination>
        </div>
      </div>
    </div>
    <el-drawer
      :title="title"
      :visible.sync="drawer"
      :direction="direction"
      :before-close="handleClose">
      <p v-html="content"></p>
    </el-drawer>
  </div>
</template>

<script>
import {listNotice} from '@/api/wlwsys/information/information'
import {viewContent} from '@/api/wlwsys/information/information'
import alert from "element-ui/packages/alert";
import id from "element-ui/src/locale/lang/id";

export default {
  computed: {
    id() {
      return id
    }
  },
  components: {

  },
  data() {
    return {
      content:"",
      title:"",
      drawer: false,
      direction: 'rtl',
      background:false,
      pageSize1:5,
      totalCount1:100,
      currentPage1:1,
      pageSize2:5,
      totalCount2:100,
      currentPage2:1,
      tableData1:[],
      tableData2:[]
    };
  },
  created() {
    this.listNotice()
  },
  methods:{
    viewContent(id){
      viewContent(id).then(res => {
        this.title = res.noticeTitle
        this.content = res.noticeContent
        this.drawer = true
      })
      console.log(id)
    },
    handleSizeChange1(val){
      this.pageSize1 = val
      listNotice(1,this.currentPage1,this.pageSize1).then(res =>{
        this.tableData1 = res.rows
        this.totalCount1 = res.total
      })
    },
    handleSizeChange2(val){
      this.pageSize2 = val
      listNotice(2,this.currentPage2,this.pageSize2).then(res =>{
        this.tableData2 = res.rows
        this.totalCount2 = res.total
      })
    },
    handleCurrentChange1(val){
      this.currentPage1 = val;
      listNotice(1,this.currentPage1,this.pageSize1).then(res =>{
        this.tableData1 = res.rows
        this.totalCount1 = res.total
      })
    },
    handleCurrentChange2(val){
      this.currentPage2 = val;
      listNotice(1,this.currentPage2,this.pageSize2).then(res =>{
        this.tableData2 = res.rows
        this.totalCount2 = res.total
      })
    },
    listNotice(){
      listNotice(1,1,5).then(res=>{
        this.tableData1 = res.rows
        this.totalCount1 = res.total
      });
      listNotice(2,1,5).then(res=>{
        this.tableData2 = res.rows
        this.totalCount2 = res.total
      });
    }
  }
};
</script>

<style>
.el-timeline-item {
  padding-bottom: 10px;
}


.head-container{
  margin: 10px;
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
  /*border: #1ab394 solid;*/
  border-radius: 5px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3)
}
.head{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80px;
}
.container {
  display: flex;
  justify-content: space-between;
  margin: 10px;
  width: 100%;
  height: 100%;
/*  border-radius: 5px;*/
/*  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3)*/
}
.item {
  flex-basis: 50%; /* 两个子元素平分父容器宽度 */
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}
.title{
  height: 80px;
}
.box {
  display: flex;
  justify-content: space-between;
  border: #2c3e50 solid;
}
.box1 {
  transition: transform 0.3s; /* 添加过渡效果，使动画更平滑 */
  display: flex;
  justify-content: space-between;
  border: #2c3e50 solid;

}
.box1:hover {
  transform: scale(1.1); /* 鼠标移入时将盒子放大1.2倍 */
}

</style>
